import React, { useEffect, useState } from 'react';
import type { IOptionType } from '../../type';
import { IPointerType } from '../../type';
import styles from './index.less';

type Tprops = {
  /**
   * 默认值
   */
  defaultValue?: IPointerType;
  /**
   * 值
   */
  value?: IPointerType;
  /**
   * 选项
   */
  options?: IOptionType[];
  /**
   * 函数
   */
  onChange?: (e: any) => void;
};

const Pointer = (props: Tprops) => {
  const {
    defaultValue = IPointerType.NINETY_SIX_POINT,
    onChange,
    value: _value,
    options = [],
  } = props;
  const [value, setValue] = useState<IPointerType>(defaultValue);

  useEffect(() => {
    if (_value) {
      setValue(_value);
    }
  }, [_value]);

  const _onChange = (e: IOptionType) => {
    if (e.value !== value) {
      setValue(e.value as IPointerType);
      onChange && onChange(e.value);
    }
  };
  return options?.length > 0 ? (
    <div className={styles.container}>
      {options.map((item) => {
        return (
          <div
            className={value === item.value ? styles.checkedLabel : styles.label}
            key={item?.value}
            onClick={() => _onChange(item)}
          >
            {item.label}
          </div>
        );
      })}
    </div>
  ) : null;
};

export default Pointer;
